<template>
  <view
    class="oto-mask"
    v-show="show"
    @click.stop="click"
    @touchmove.stop.prevent="() => {}"
    :style="[customStyle, { zIndex: zIndex }]"
  ></view>
</template>

<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
      zIndex: {
        type: [Number, String],
        default: 300
      },
      customStyle: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    methods: {
      click(e) {
        this.$emit('click', e);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .oto-mask {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 300;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    background: rgba(0, 0, 0, 0.6);
  }
</style>
